<template>
  <div class="Mape">
    <div id="mapCont"></div>
  </div>
</template>

<script>
// import { BMap }   from "vue-baidu-map"
export default {
  components: {
    // BMap
  },
  methods: {
    reandMap() {
      var map = new BMap.Map("mapCont");
      var point = new BMap.Point(121.875421, 39.06113);
      map.centerAndZoom(point, 15);
      var marker = new BMap.Marker(point);        // 创建标注    
      map.addOverlay(marker);                     // 将标注添加到地图中 
      var opts = {
        width: 440,                               // 信息窗口宽度    
        height: 180,                              // 信息窗口高度    
        title: "",                                 // 信息窗口标题   
      }
      map.enableKeyboard();                       //启用键盘操作
      map.enableInertialDragging()                //启用键盘惯性拖拽
      var tempate = `
         <div>
            <div style="width: 50%;float: left;">
                <img src="${require('../assets/logo.png')}" width="160">
                <br />
                <p style="font-size: 13px;line-height: 24px;color: #242424;">觅视互动是一个提供简单+高效+专业的在线视频制作平台</p>
                <p style="font-size: 13px;line-height: 24px;color: #242424;">设计师可将符合觅视标准的视频源文件分享至平台并获取利润</p>
                <p style="font-size: 13px;line-height: 24px;color: #242424;">无论你是使用者或是创作者</p>
                <p style="font-size: 13px;line-height: 24px;color: #242424;">觅视互动自由开放的平台满足你的需求 </p>
            </div>
            <div style=" padding-left: 17px;overflow: hidden;">
                <img src="${require('../assets/show.png')}" alt="觅视科技" width="175">
            </div>
        </div>
      `
      var infoWindow = new BMap.InfoWindow(tempate, opts);  // 创建信息窗口对象  
      infoWindow.disableCloseOnClick()
      map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: {
          map: map,
          autoViewport: true
        }
      });
      map.addEventListener("click", function (e) {
        map.clearOverlays()
        let nowpoint = new BMap.Point(e.point.lng, e.point.lat);
        var marker1 = new BMap.Marker(nowpoint);
        map.addOverlay(marker1);
        driving.search(nowpoint, point);
      });
      var stCtrl = new BMap.PanoramaControl();
      stCtrl.setOffset(new BMap.Size(20, 20));
      map.addControl(stCtrl);
      // var start = new BMap.Point(116.310791, 40.003419);
      // driving.search(start, point);
    }
  },
  mounted() {
    this.reandMap();

  }
}
</script>

<style lang="scss" scoped>
.Mape {
  width: 100%;
  height: 600px;

  #mapCont {
    width: 100%;
    height: 100%;
  }
}
</style> 